<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="800"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">
    <a-col :span="24" v-for="(category, index) in resourceCategorys" :key="index">
      <a-card v-if="category.resourceList" :headStyle="{background:'#EAEAEA'}" bordered:="true" style="margin-top: 12px; height: auto;">
        <a-checkbox slot="title" :indeterminate="category.checkedList && category.checkedList.length != 0 && category.resourceList.length > category.checkedList.length" :checked="category.checkedList && category.resourceList.length == category.checkedList.length" @change="e => onCheckAllChange(e,category)">
          {{ category.name }}
        </a-checkbox>
        <a-checkbox-group :options="category.resourceList" v-model="category.checkedList">
        </a-checkbox-group>
      </a-card>
    </a-col>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
    </div>

  </a-drawer>

</template>
<script>
import { getRoleResources, allocateRoleResources } from '@/api/system'

export default {
  name: 'RoleMenuModal',
  components: {},
  data () {
    return {
      roleId: '',
      resourceCategorys: [],
      title: '角色权限配置',
      visible: false,
      plainOptions: {},
      loading: false
    }
  },
  methods: {
    close () {
      this.reset()
      this.$emit('close')
      this.visible = false
    },
    show (roleId) {
      this.roleId = roleId
      this.visible = true
    },
    reset () {
      this.loading = false
    },
    onCheckAllChange (e, category) {
      if (e.target.checked) {
        category.checkedList = []
        category.resourceList.map((item) => {
          category.checkedList.push(item.value)
        })
      } else {
        category.checkedList = []
      }
    },
    handleSubmit (exit) {
      const that = this
      that.loading = true
      const param = {
        roleId: that.roleId,
        resourceIdList: []
      }
      this.resourceCategorys.map((item) => {
        if (item.checkedList) {
          param.resourceIdList = param.resourceIdList.concat(item.checkedList)
        }
      })
      allocateRoleResources(param).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loading = false
          if (exit) {
            that.close()
          }
        } else {
          that.$message.error(res.message)
          that.loading = false
          if (exit) {
            that.close()
          }
        }
        this.loadData()
      })
    },
    loadData () {
      const that = this
      getRoleResources({ roleId: this.roleId }).then((res) => {
        that.resourceCategorys = res.data
      })
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        this.loadData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
